<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 4.2.1">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/%E6%AD%A6%E6%B1%8932x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/%E6%AD%A6%E6%B1%8916x16.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib1/font-awesome/css/all.min.css">
  <link rel="stylesheet" href="/lib1/pace/pace-theme-center-simple.min.css">
  <script src="/lib1/pace/pace.min.js"></script>

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"example.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":true,"show_result":true,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
  </script>

  <meta name="description" content="前言正则表达式是匹配模式，要么匹配字符，要么匹配位置。关于正则表达式的原理和写法，网上的文章已经特别之多了，本篇文章将不着重于原理与方法，将直接以各种题目的形式来进行正则表达式的介绍，同样，题目的难度也将由弱至强。首先附上经典的正则链接网站：regulex。 基本符号   字符组 用于纵向模糊匹配，[]组内代表一个字符元素    ^ 在第一位放脱字符，表示求反的概念   \d [0-9]，digi">
<meta property="og:type" content="article">
<meta property="og:title" content="正则面试题汇总">
<meta property="og:url" content="http://example.com/2021/02/06/%E9%9D%A2%E8%AF%95%E6%80%BB%E7%BB%93/%E6%AD%A3%E5%88%99%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB/index.html">
<meta property="og:site_name" content="Technological Blog">
<meta property="og:description" content="前言正则表达式是匹配模式，要么匹配字符，要么匹配位置。关于正则表达式的原理和写法，网上的文章已经特别之多了，本篇文章将不着重于原理与方法，将直接以各种题目的形式来进行正则表达式的介绍，同样，题目的难度也将由弱至强。首先附上经典的正则链接网站：regulex。 基本符号   字符组 用于纵向模糊匹配，[]组内代表一个字符元素    ^ 在第一位放脱字符，表示求反的概念   \d [0-9]，digi">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2021-02-06T13:28:16.000Z">
<meta property="article:modified_time" content="2021-11-03T08:24:17.093Z">
<meta property="article:author" content="Li Yudong">
<meta property="article:tag" content="正则">
<meta name="twitter:card" content="summary">

<link rel="canonical" href="http://example.com/2021/02/06/%E9%9D%A2%E8%AF%95%E6%80%BB%E7%BB%93/%E6%AD%A3%E5%88%99%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>正则面试题汇总 | Technological Blog</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">Technological Blog</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
      <p class="site-subtitle" itemprop="description">IT小白的成长之旅</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-about">

    <a href="/about/" rel="section"><i class="user fa-fw"></i>关于</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/tags/" rel="section"><i class="tags fa-fw"></i>标签<span class="badge">18</span></a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/categories/" rel="section"><i class="th fa-fw"></i>分类<span class="badge">14</span></a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="archive fa-fw"></i>归档<span class="badge">95</span></a>

  </li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div id="search-result">
  <div id="no-result">
    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
  </div>
</div>

    </div>
  </div>

</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>

  <a href="https://github.com/tiarmor1" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://example.com/2021/02/06/%E9%9D%A2%E8%AF%95%E6%80%BB%E7%BB%93/%E6%AD%A3%E5%88%99%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/author.jpg">
      <meta itemprop="name" content="Li Yudong">
      <meta itemprop="description" content="">
    </span>
    
    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Technological Blog">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          正则面试题汇总
        </h1>
    
        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>
    
              <time title="创建时间：2021-02-06 21:28:16" itemprop="dateCreated datePublished" datetime="2021-02-06T21:28:16+08:00">2021-02-06</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2021-11-03 16:24:17" itemprop="dateModified" datetime="2021-11-03T16:24:17+08:00">2021-11-03</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/%E9%9D%A2%E8%AF%95%E6%80%BB%E7%BB%93/" itemprop="url" rel="index"><span itemprop="name">面试总结</span></a>
                </span>
            </span>
    
          
    
        </div>
      </header>
    
    
    
    
    <div class="post-body" itemprop="articleBody">
    
      
        <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>正则表达式是匹配模式，要么匹配字符，要么匹配位置。关于正则表达式的原理和写法，网上的文章已经特别之多了，本篇文章将不着重于原理与方法，将直接以各种题目的形式来进行正则表达式的介绍，同样，题目的难度也将由弱至强。首先附上经典的正则链接网站：<a href="https://jex.im/regulex/#!flags=&re=%5E(%5Cd%7B3%7D-)%7B2%7D%5Cd%7B4%7D%26" target="_blank" rel="noopener">regulex</a>。</p>
<h1 id="基本符号"><a href="#基本符号" class="headerlink" title="基本符号"></a>基本符号</h1><table>
<thead>
<tr>
<th>字符组</th>
<th>用于纵向模糊匹配，[]组内代表一个字符元素</th>
</tr>
</thead>
<tbody><tr>
<td>^</td>
<td>在第一位放脱字符，表示求反的概念</td>
</tr>
<tr>
<td>\d</td>
<td>[0-9]，digit，表示一位数字</td>
</tr>
<tr>
<td>\D</td>
<td>[^0-9]，表示除数字外的任意字符</td>
</tr>
<tr>
<td>\w</td>
<td>[0-9a-zA-Z]，word，表示数字、大小写字母和下划线等单词字母</td>
</tr>
<tr>
<td>\W</td>
<td>[^0-9a-zA-Z]，表示非单词字母</td>
</tr>
<tr>
<td>\s</td>
<td>[\t\v\n\r\f]，space，表示空白格，包括空格、水平制表符、垂直制表符、换行符、回车符、换页符</td>
</tr>
<tr>
<td>\S</td>
<td>[^ \t\v\n\r\f]，表示非空白符</td>
</tr>
<tr>
<td>.</td>
<td>[^\n\r\u2028\u2029]，通配符，表示几乎任意字符，换行、回车、行分隔、段分隔符除外。</td>
</tr>
<tr>
<td>\1</td>
<td>反向引用，代表第一个用括号区分的分组，括号嵌套的号由开括号（来判断</td>
</tr>
</tbody></table>
<table>
<thead>
<tr>
<th>量词</th>
<th>用于横向匹配，匹配多个字符，默认为贪婪匹配，可后加?变为惰性匹配</th>
</tr>
</thead>
<tbody><tr>
<td>{m,}</td>
<td>表示至少出现m次</td>
</tr>
<tr>
<td>？</td>
<td>等价于{0，1}，表示出现或不出现</td>
</tr>
<tr>
<td>+</td>
<td>等价于{1，}，表示出现至少一次</td>
</tr>
<tr>
<td>*</td>
<td>等价于{0，}，表示出现任意次或者不出现</td>
</tr>
</tbody></table>
<table>
<thead>
<tr>
<th>位置特性</th>
<th>用于位置方式的匹配</th>
</tr>
</thead>
<tbody><tr>
<td>^、$</td>
<td>脱字符、美元符号分别在多行匹配中，匹配行开头与行结尾</td>
</tr>
<tr>
<td>\b</td>
<td>匹配单词边界，具体就是\w与\W之间的位置，也包括\w与^、$之间的</td>
</tr>
<tr>
<td>\B</td>
<td>同样，是\b的反面的意思</td>
</tr>
<tr>
<td>(?=p)</td>
<td>p为一个子模式，即匹配p前面的位置</td>
</tr>
<tr>
<td>(?!p)</td>
<td>其实就是(?=p)取反，除了p前面的位置以外的所有位置</td>
</tr>
</tbody></table>
<table>
<thead>
<tr>
<th>方法</th>
<th>返回值与参数</th>
</tr>
</thead>
<tbody><tr>
<td>test</td>
<td>一个在字符串中测试是否匹配的RegExp方法，它返回true或false。regex.test(string)</td>
</tr>
<tr>
<td>exec</td>
<td>一个在字符串中执行查找匹配的RegExp方法，它返回一个数组（未匹配到则返回null）regex.exec(string)</td>
</tr>
<tr>
<td>match</td>
<td>一个在字符串中执行查找匹配的String方法，它返回一个数组或者在未匹配到时返回null。string.match(regex)；match返回的是一个数组，包括各个括号匹配的内容</td>
</tr>
<tr>
<td>search</td>
<td>一个在字符串中测试匹配的String方法，它返回匹配到的位置索引，或者在失败时返回-1。</td>
</tr>
<tr>
<td>replace</td>
<td>个在字符串中执行查找匹配的String方法，并且使用替换字符串替换掉匹配到的子字符串。string.replace(regex, “ ”)</td>
</tr>
<tr>
<td>split</td>
<td>一个使用正则表达式或者一个固定字符串分隔一个字符串，并将分隔后的子字符串存储到数组中的String方法。</td>
</tr>
</tbody></table>
<h1 id="简单正则匹配"><a href="#简单正则匹配" class="headerlink" title="简单正则匹配"></a>简单正则匹配</h1><h2 id="字符匹配"><a href="#字符匹配" class="headerlink" title="字符匹配"></a>字符匹配</h2><h3 id="16进制颜色值"><a href="#16进制颜色值" class="headerlink" title="16进制颜色值"></a>16进制颜色值</h3><p>要求匹配：#12f3a1，#ffBabd，#FFF；等颜色值字母不区分大小写，且可为3位或者六位</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> regex = <span class="regexp">/#([0-9a-fA-F]&#123;6&#125;|[0-9a-fA-F]&#123;3&#125;)/g</span>;</span><br><span class="line"><span class="keyword">let</span> string = <span class="string">"#12f3a1 #ffBabd #FFF #123 #586"</span>;</span><br><span class="line"><span class="built_in">console</span>.log(string.match(regex));</span><br></pre></td></tr></table></figure>

<p>相当简单的正则，主要就是把基础知识运用下，只有两个分支匹配且逻辑清楚。</p>
<h3 id="24小时时间"><a href="#24小时时间" class="headerlink" title="24小时时间"></a>24小时时间</h3><p>要求匹配：23：59，04：09，8：9，19：47；这样的时间，前面的0可以省略也可带着</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> regex = <span class="regexp">/^(0?[0-9]|1[0-9]|2[0-3]):(0?[0-9]|[1-5][0-9])$/</span>;</span><br><span class="line"><span class="keyword">let</span> arr = [<span class="string">"23:59"</span>, <span class="string">"04:09"</span>, <span class="string">"8,9"</span>, <span class="string">"19:47"</span>];</span><br><span class="line"><span class="keyword">let</span> res = [];</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; arr.length; i++) &#123;</span><br><span class="line">    <span class="keyword">if</span> (regex.test(arr[i])) &#123;</span><br><span class="line">        res.push(arr[i]);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>也是比较简单的正则，记得用括号将各段隔开，不然运算顺序可能不与你想的一致。</p>
<h3 id="IP地址"><a href="#IP地址" class="headerlink" title="IP地址"></a>IP地址</h3><p>要求匹配：192.168.225.255，156.234.156.215，1.2.3.4;类似的IP地址</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> regex = <span class="regexp">/^(25[0-5]|2[0-4]\d|[0-1]\d&#123;2&#125;|[1-9]?\d)\.\1\.\1\.\1$/</span>;</span><br><span class="line"><span class="keyword">let</span> arr = [<span class="string">"192.168.225.255"</span>, <span class="string">"156.234.156.215"</span>, <span class="string">"1.2.3.4"</span>];</span><br><span class="line"><span class="keyword">let</span> res = [];</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; arr.length; i++) &#123;</span><br><span class="line">    <span class="keyword">if</span> (regex.test(arr[i])) &#123;</span><br><span class="line">        res.push(arr[i]);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>这里的.字符需要转义，且利用括号分组来复用前面的正则。\1代表第一个括号引用的分组，根据第一个开括号(来确认。</p>
<h3 id="带格式日期"><a href="#带格式日期" class="headerlink" title="带格式日期"></a>带格式日期</h3><p>要求匹配：2020-09-12，2043-12-30，2018/08/09，2016.06.21；分隔符有三种可用，且要求分隔符前后使用一样。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> regex = <span class="regexp">/\d&#123;4&#125;(-|\/|\.)\d&#123;2&#125;\1\d&#123;2&#125;/</span>;</span><br><span class="line"><span class="keyword">let</span> res = [];</span><br><span class="line"><span class="keyword">let</span> arr = [<span class="string">"2020-09-12"</span>，<span class="string">"2043-12-30"</span>，<span class="string">"2018/08/09"</span>，<span class="string">"2016.06.21"</span>];</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; arr.length; i++) &#123;</span><br><span class="line">    <span class="keyword">if</span> (regex.test(arr[i])) &#123;</span><br><span class="line">        res.push(arr[i]);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>要求分隔符前后一致，因此我们就必须用上题提过的括号分组复用，才能够实现这样的功能。我这里没有对日期的期限进行要求，直接用的数字均可，有要求的话，根据之前IP例题的逻辑，也能够很容易写出，这里就不再赘述。</p>
<p>同样，分组复用可以实现简单的替换，例如：想把yyyy-mm-dd替换成mm/dd/yyyy，以下的代码可以实现</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> regex = <span class="regexp">/(\d&#123;4&#125;)-(\d&#123;2&#125;)-(\d&#123;2&#125;)/</span>;</span><br><span class="line"><span class="keyword">let</span> string = <span class="string">"2020-09-12"</span>;</span><br><span class="line"><span class="keyword">let</span> res = string.replace(regex, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">RegExp</span>.$<span class="number">2</span> + <span class="string">"/"</span> + <span class="built_in">RegExp</span>.$<span class="number">3</span> + <span class="string">"/"</span> + <span class="built_in">RegExp</span>.$<span class="number">1</span>;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="comment">//RegExp中的$1、$2、$3代表第1、2、3个分组</span></span><br></pre></td></tr></table></figure>

<h3 id="字符串去重"><a href="#字符串去重" class="headerlink" title="字符串去重"></a>字符串去重</h3><p>实例：将”aaaaabbbbbccccc”去重返回成为”abc”。利用括号分组的同样匹配，来实现查询出重复字符的效果，由于重复字符可以出现多次，因此后面还要加上+,表示至少出现一次。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> regex = <span class="regexp">/(\w)\1+/g</span>;</span><br><span class="line"><span class="comment">//g代表全局匹配，会在一次匹配结束后继续匹配多次。而非仅匹配一次</span></span><br><span class="line"><span class="keyword">let</span> str = <span class="string">"aaaaabbbbbddddggggggggffff"</span>;</span><br><span class="line"><span class="keyword">let</span> res = str.replace(regex, <span class="string">"$1"</span>);</span><br></pre></td></tr></table></figure>



<h3 id="HTML标签"><a href="#HTML标签" class="headerlink" title="HTML标签"></a>HTML标签</h3><p>要求匹配HTML标签a内容，比如”<a herf='www.baidu.com'>“”<a>“，即匹配出两个&lt;&gt;之间，且第一个字符为a</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> regex = <span class="regexp">/&lt;a[^&gt;]+&gt;/g</span></span><br></pre></td></tr></table></figure>

<p>这里的^脱字符代表取反，即除了”&gt;”以外均匹配。</p>
<h3 id="驼峰字符串"><a href="#驼峰字符串" class="headerlink" title="驼峰字符串"></a>驼峰字符串</h3><p>要求将一个连续字符串如：get-element-by-id转化成驼峰形式</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">toHump</span>(<span class="params">str</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> str.replace(<span class="regexp">/-(\w)/g</span>, <span class="function"><span class="keyword">function</span>(<span class="params">$<span class="number">1</span></span>))</span></span><br><span class="line"><span class="function">&#125;</span></span><br></pre></td></tr></table></figure>

<p>将-后面是字符的-与首字符的位置均匹配到，然后将$1，即-后的字符变成大写后replace进去</p>
<h3 id="邮箱格式"><a href="#邮箱格式" class="headerlink" title="邮箱格式"></a>邮箱格式</h3><p>1.不限制长度</p>
<p>2.不限制大小写</p>
<p>3.邮箱开头必须是数字或字符串</p>
<p>4.邮箱中可以使用字母、数字、点号、下划线、减号，但是不能连写点号、下划线、减号，如 <a href="mailto:&#97;&#98;&#99;&#95;&#45;&#x64;&#101;&#x40;&#x71;&#x5f;&#x2e;&#x71;&#46;&#99;&#x6f;&#x6d;">&#97;&#98;&#99;&#95;&#45;&#x64;&#101;&#x40;&#x71;&#x5f;&#x2e;&#x71;&#46;&#99;&#x6f;&#x6d;</a></p>
<p>5.@符号前后不能为点号、下划线、减号</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">isAvailableEmail</span>(<span class="params">sEmail</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> reg = <span class="regexp">/^([\w+\._-])+@\w+[\.\w]+$/</span>;</span><br><span class="line">    <span class="keyword">return</span> reg.test(sEmail);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="识别十进制整数"><a href="#识别十进制整数" class="headerlink" title="识别十进制整数"></a>识别十进制整数</h3><p>修改 js 代码中 parseInt 的调用方式，使之通过全部测试用例。</p>
<p>eg：’12px’、’0x12’</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">parse2Int</span>(<span class="params">num</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> regex=<span class="regexp">/^\d+/</span>;</span><br><span class="line">    num=regex.exec(num)[<span class="number">0</span>];</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">parseInt</span>(num);</span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">//或者可以直接使用parseInt(num, 10)；这个API会自动识别非十进制的数，将其排除在外</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">parse2Int</span>(<span class="params">num</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">parseInt</span>(num,<span class="number">10</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h3 id="颜色字符串转换"><a href="#颜色字符串转换" class="headerlink" title="颜色字符串转换"></a>颜色字符串转换</h3><p>考的知识点两个：</p>
<ol>
<li><p>正则表达式匹配；</p>
</li>
<li><p>toString(16)转换进制；toString()可用于转换进制、判断引用类型。</p>
</li>
</ol>
<p>做的过程中注意：</p>
<ol>
<li>数值超界（0-255）</li>
<li>不足两位补零</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">rgb2hex</span>(<span class="params">sRGB</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> reg = <span class="regexp">/rgb\((\d+),\s*(\d+),\s*(\d+)\)/</span>;</span><br><span class="line">    <span class="keyword">let</span> res = sRGB.match(reg);<span class="comment">//match返回一个数组或者在未匹配到时返回null</span></span><br><span class="line">    <span class="keyword">if</span> (!res) &#123;</span><br><span class="line">        <span class="keyword">return</span> sRGB;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="keyword">let</span> str = <span class="string">'#'</span>;</span><br><span class="line">        <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">1</span>; i &lt;= <span class="number">3</span>; i++) &#123;</span><br><span class="line">            <span class="keyword">let</span> num = <span class="built_in">parseInt</span>(res[i]);</span><br><span class="line">            <span class="keyword">if</span> (num &lt;= <span class="number">255</span> &amp;&amp; num &gt;= <span class="number">0</span>) &#123;</span><br><span class="line">                str += (num &lt; <span class="number">16</span> ? <span class="string">'0'</span> + num.toString(<span class="number">16</span>) : num.toString(<span class="number">16</span>));</span><br><span class="line">            &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">                <span class="keyword">return</span> sRGB;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">return</span> str;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="变为驼峰"><a href="#变为驼峰" class="headerlink" title="变为驼峰"></a>变为驼峰</h3><p>replace() 方法返回一个由替换值（replacement）替换一些或所有匹配的模式（pattern）后的新字符串。</p>
<p>这个用法的本质就是：对str使用RegArg做match()匹配，如果匹配到多项结果（比如使用了全局匹配g，或者分组），那么每一个匹配结果都将执行一次FuncArg函数，并且用该函数的返回值替代源字符串中的匹配项。</p>
<p>第一个参数可以是字符串或正则表达式，如果提供的是字符串，只会替换第一个子字符串。如果想替换所有子字符串，需要提供一个指定了 g 的正则表达式。</p>
<p>第二个参数可以是字符串或函数。如果是字符串，可以使用一些特殊的 <strong>字符序列</strong>：</p>
<p>如果第二个参数也可以是函数，这个函数接收多个参数：function (match[，p1, p2, …, pn], offset, string)</p>
<ul>
<li>match：匹配的子串，等同于前面提到的 $&amp;</li>
<li>p1-p2：为捕获组对应的匹配字符串（如果设置了捕获组）。</li>
<li>offset：模式匹配项位于输入字符串的位置</li>
<li>string：输入的原始字符串。</li>
<li>函数的返回值：返回值即为替换的文本。</li>
</ul>
<p>css 中经常有类似 background-image 这种通过 - 连接的字符，通过 javascript 设置样式的时候需要将这种样式转换成 backgroundImage 驼峰格式，请完成此转换功能</p>
<p>1、以 - 为分隔符，将第二个起的非空单词首字母转为大写</p>
<p>2、-webkit-border-image 转换后的结果为 webkitBorderImage</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">cssStyle2DomStyle</span>(<span class="params">sName</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> reg = <span class="regexp">/-(\w)/g</span>;</span><br><span class="line">    <span class="keyword">let</span> res = sName.replace(reg, <span class="function"><span class="keyword">function</span>(<span class="params">fullMatch, g1, index</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">if</span> (index === <span class="number">0</span>) <span class="keyword">return</span> g1;</span><br><span class="line">        <span class="comment">//当模式串匹配的为单词的首项时，证明-在最前面，此时返回小写字母，将-a替换成a。</span></span><br><span class="line">        <span class="keyword">return</span> g1.toUpperCase();</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">return</span> res;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="获取url中参数"><a href="#获取url中参数" class="headerlink" title="获取url中参数"></a>获取url中参数</h3><ol>
<li><p>指定参数名称，返回该参数的值 或者 空字符串</p>
</li>
<li><p>不指定参数名称，返回全部的参数对象 或者 {}</p>
</li>
<li><p>如果存在多个同名参数，则返回数组</p>
</li>
</ol>
<p>例:输入：<a href="http://www.nowcoder.com/?key=1&amp;key=2&amp;key=3&amp;test=4#hehe" target="_blank" rel="noopener">http://www.nowcoder.com?key=1&amp;key=2&amp;key=3&amp;test=4#hehe</a> key；输出：[1, 2, 3]</p>
<p>方法一：使用字符串拼接来匹配。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*  获取URl中的参数</span></span><br><span class="line"><span class="comment">* @para url </span></span><br><span class="line"><span class="comment">* @para key 参数名*/</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getUrlParam</span>(<span class="params">sUrl, sKey</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> left= sUrl.indexOf(<span class="string">"?"</span>) + <span class="number">1</span></span><br><span class="line">    <span class="keyword">var</span> right= sUrl.lastIndexOf(<span class="string">"#"</span>)</span><br><span class="line">    <span class="keyword">var</span> parasString = sUrl.slice(left, right)</span><br><span class="line">    <span class="keyword">var</span> paras = parasString.split(<span class="string">'&amp;'</span>);</span><br><span class="line">    <span class="keyword">var</span> parasjson = &#123;&#125;</span><br><span class="line">    paras.forEach(<span class="function"><span class="keyword">function</span> (<span class="params">value, index, arr</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> a = value.split(<span class="string">'='</span>);</span><br><span class="line">        parasjson[a[<span class="number">0</span>]] !== <span class="literal">undefined</span> ? parasjson[a[<span class="number">0</span>]] = [].concat(parasjson[a[<span class="number">0</span>]], a[<span class="number">1</span>]) : parasjson[a[<span class="number">0</span>]] = a[<span class="number">1</span>];</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">let</span> result = <span class="built_in">arguments</span>[<span class="number">1</span>] !== <span class="keyword">void</span> <span class="number">0</span> ? (parasjson[<span class="built_in">arguments</span>[<span class="number">1</span>]] || <span class="string">''</span>) : parasjson;</span><br><span class="line">    <span class="keyword">return</span> result</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>方法二：使用正则中的replace进行替换</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getUrlParam2</span>(<span class="params">sUrl, sKey</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> result, Oparam = &#123;&#125;;</span><br><span class="line">    sUrl.replace(<span class="regexp">/[\?&amp;]?(\w+)=(\w+)/g</span>, <span class="function"><span class="keyword">function</span> (<span class="params">$<span class="number">0</span>, $<span class="number">1</span>, $<span class="number">2</span></span>) </span></span><br><span class="line"><span class="function">        <span class="title">console</span>.<span class="title">log</span>(<span class="params"><span class="string">'$0:'</span> + $<span class="number">0</span> + <span class="string">"     $1:"</span> + $<span class="number">1</span> + <span class="string">"     $2:"</span> + $<span class="number">2</span></span>);</span></span><br><span class="line">        Oparam[$1] === void 0 ? Oparam[$1] = $2 : Oparam[$1] = [].concat(Oparam[$1], $2);</span><br><span class="line">    &#125;);</span><br><span class="line">    sKey === <span class="keyword">void</span> <span class="number">0</span> || sKey === <span class="string">''</span> ? result = Oparam : result = Oparam[sKey] || <span class="string">''</span>;</span><br><span class="line">    <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>方法三：使用正则中的exec方法</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getUrlParam3</span>(<span class="params">sUrl, sKey</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> resObj = &#123;&#125;;</span><br><span class="line">    <span class="keyword">var</span> reg = <span class="regexp">/(\w+)=(\w+)/g</span>;</span><br><span class="line">    <span class="keyword">while</span> (reg.exec(sUrl)) &#123;</span><br><span class="line">        resObj[<span class="built_in">RegExp</span>.$<span class="number">1</span>] ? resObj[<span class="built_in">RegExp</span>.$<span class="number">1</span>] = [].concat(resObj[<span class="built_in">RegExp</span>.$<span class="number">1</span>], <span class="built_in">RegExp</span>.$<span class="number">2</span>) : resObj[<span class="built_in">RegExp</span>.$<span class="number">1</span>] = <span class="built_in">RegExp</span>.$<span class="number">2</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">if</span> (sKey) &#123;</span><br><span class="line">        <span class="keyword">return</span> (resObj[sKey] ? resObj[sKey] : <span class="string">''</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> resObj;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="域名解析"><a href="#域名解析" class="headerlink" title="域名解析"></a>域名解析</h3><p>函数parseUrl实现将一段url字段解析为Object，例如url为：”<a href="http://www.xiyanghui.com/product/list?id=123456&amp;sort=discount#title&quot;;parseUrl(url)%E8%BF%94%E5%9B%9E%E7%9A%84%E7%BB%93%E6%9E%9C%E4%B8%BAobject%E5%A6%82%E4%B8%8B%EF%BC%9A" target="_blank" rel="noopener">http://www.xiyanghui.com/product/list?id=123456&amp;sort=discount#title&quot;;parseUrl(url)返回的结果为object如下：</a></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> object = &#123;</span><br><span class="line">    protocol:<span class="string">"http"</span>,</span><br><span class="line">    host:<span class="string">"www.xiyanghui.com"</span>,</span><br><span class="line">    path:<span class="string">"product/list"</span>,</span><br><span class="line">    query: &#123;</span><br><span class="line">        id:<span class="string">"123456"</span>,</span><br><span class="line">        sort:<span class="string">"discount"</span></span><br><span class="line">    &#125;,</span><br><span class="line">    hash:<span class="string">"title"</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">parseUrl</span>(<span class="params">str</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 判断是否传入参数</span></span><br><span class="line">    <span class="keyword">if</span> (str) &#123;</span><br><span class="line">        <span class="keyword">var</span> obj = &#123;&#125;;</span><br><span class="line">        <span class="keyword">var</span> queryArr = [];</span><br><span class="line">        <span class="comment">// 正则表达式规则</span></span><br><span class="line">        <span class="keyword">var</span> re = <span class="regexp">/^(http[s]?):\/\/([0-9a-zA-Z\.]+)\/([a-zA-Z0-9\/]+)\?([a-zA-Z0-9\=\&amp;]+)#([0-9a-zA-Z\.]+)$/</span>;</span><br><span class="line">        <span class="comment">// 利用正则表达式将字符串分组</span></span><br><span class="line">        <span class="keyword">var</span> reArr = re.exec(str);</span><br><span class="line">        <span class="keyword">if</span> (reArr) &#123;</span><br><span class="line">            obj.peotocol = reArr[<span class="number">1</span>];</span><br><span class="line">            obj.host = reArr[<span class="number">2</span>];</span><br><span class="line">            obj.path = reArr[<span class="number">3</span>];</span><br><span class="line">            queryArr = reArr[<span class="number">4</span>].split(<span class="regexp">/[\&amp;\=]+/</span>);</span><br><span class="line">            obj.query = &#123;&#125;;</span><br><span class="line">            <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; queryArr.length; i += <span class="number">2</span>) &#123;</span><br><span class="line">                obj.query[queryArr[i]] = queryArr[i + <span class="number">1</span>];</span><br><span class="line">            &#125;</span><br><span class="line">            obj.hash = reArr[<span class="number">5</span>]</span><br><span class="line">            <span class="keyword">return</span> obj;</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> <span class="literal">null</span>;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">null</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="位置匹配"><a href="#位置匹配" class="headerlink" title="位置匹配"></a>位置匹配</h2><h3 id="千位分隔符"><a href="#千位分隔符" class="headerlink" title="千位分隔符"></a>千位分隔符</h3><p>千位分隔符的关键在于两点：1、使用量词+多次匹配d{3}；2、要求匹配的位置不能是开头，因此用(?!^)</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> regex = <span class="regexp">/(?!^)(?=(\d&#123;3&#125;)+$)/g</span>;</span><br><span class="line"><span class="keyword">let</span> regex = <span class="regexp">/(?!^)(?=(\d&#123;3&#125;)+$)/g</span>;<span class="comment">//先要求匹配的位置不能是开头,$代表从单词末尾开始匹配，/g代表</span></span><br><span class="line"><span class="keyword">let</span> string = <span class="string">"123456789"</span>;</span><br><span class="line"><span class="keyword">let</span> res = string.replace(regex, <span class="string">','</span>);</span><br></pre></td></tr></table></figure>

<p>如果还要求支持”12345783   23498237489  3219482”这样多个数字间用空格来区分的输入的话，只需要将^、$进行修改，改成\b，从而匹配多个连续字符的开头、结尾，而不是匹配整个字符串的开头、结尾。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> regex = <span class="regexp">/(?!\b)(?=(\d&#123;3&#125;)+\b)/g</span>;</span><br><span class="line"><span class="keyword">let</span> string = <span class="string">"12345783   23498237489  3219482"</span>;</span><br><span class="line"><span class="keyword">let</span> res = string.replace(regex, <span class="string">','</span>);</span><br></pre></td></tr></table></figure>

<h3 id="密码判断"><a href="#密码判断" class="headerlink" title="密码判断"></a>密码判断</h3><p>多种条件的密码判断往往写成多个小的正则进行判断，下面基本使用三个小的条件进行密码判断。总的要求是：密码长度6-12位，由数字、小写字符、大写字符组成，但必须至少包括2种字符，且必须包含数字</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//1、要求密码长度6-12位</span></span><br><span class="line"><span class="keyword">let</span> regex1 = <span class="regexp">/^[0-9A-Za-z]&#123;6,12&#125;$/</span>;</span><br><span class="line"><span class="comment">//2、要求必须包含数字</span></span><br><span class="line"><span class="keyword">let</span> regex2 = <span class="regexp">/?=.*[0-9]/</span>;<span class="comment">//即任意数量任意字符的后面前一个位置，后面会接一个数字=&gt;包含一个数字</span></span><br><span class="line"><span class="comment">//3、要求同时包含两种</span></span><br><span class="line"><span class="keyword">let</span> regex3 = <span class="regexp">/(?=.*[0-9])(?=.*[a-z])/</span>;</span><br><span class="line"><span class="keyword">let</span> arr = [<span class="string">"192.168.225.255"</span>, <span class="string">"156.234.156.215"</span>, <span class="string">"1.2.3.4"</span>];</span><br><span class="line"><span class="keyword">let</span> res = [];</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; arr.length; i++) &#123;</span><br><span class="line">    <span class="keyword">if</span> (regex1.test(arr[i]) &amp;&amp; regex2.test(arr[i]) &amp;&amp; regex3.test(arr[i])) &#123;</span><br><span class="line">        res.push(arr[i]);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h1 id="替代正则"><a href="#替代正则" class="headerlink" title="替代正则"></a>替代正则</h1><p>并不是所有的问题均适合使用正则解决：1、有些看似简单的问题，但正则做不到；2、有些能用字符串简单API就能解决的问题，使用正则会提高时间负杂度。</p>
<h2 id="提取年月日"><a href="#提取年月日" class="headerlink" title="提取年月日"></a>提取年月日</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> string = <span class="string">"2020-09-01"</span>;</span><br><span class="line"><span class="keyword">let</span> regex = <span class="regexp">/^(\d&#123;4&#125;)-(\d&#123;2&#125;)-(\d&#123;2&#125;)/</span>;</span><br><span class="line"><span class="built_in">console</span>.log(string.match(regex));</span><br><span class="line"><span class="comment">//输出为["2020-09-01", "2020", "09", "01", index: 0, input: "2020-09-01"]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//其实，用字符串的split方法来做即可：</span></span><br><span class="line"><span class="keyword">let</span> string = <span class="string">"2020-09-01"</span>;</span><br><span class="line"><span class="keyword">let</span> res = string.split(<span class="string">"-"</span>);</span><br><span class="line"><span class="built_in">console</span>.log(res);<span class="comment">//输出为["2017", "07", "01"]</span></span><br><span class="line"><span class="comment">/*split()方法用于把一个字符串分割成字符串数组。</span></span><br><span class="line"><span class="comment">separator	必需。字符串或正则表达式，从该参数指定的地方分割 stringObject。</span></span><br><span class="line"><span class="comment">howmany	可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。*/</span></span><br></pre></td></tr></table></figure>

<h2 id="模糊查询"><a href="#模糊查询" class="headerlink" title="模糊查询"></a>模糊查询</h2><p>需要实现的功能是类似百度搜索框的模糊查询，这里先只考虑JS代码，构建的函数传入参数有2个，分别是list存储所有关键词信息的数组、keyword模糊查询的关键词、res查询得出的结果。</p>
<h3 id="indexOf方法"><a href="#indexOf方法" class="headerlink" title="indexOf方法"></a>indexOf方法</h3><p>stringObject.indexOf(searchValue)该方法从头到尾检索字符串stringObject，看它是否含有子串searchValue，开始检索得位置在字符串的开头，找到searchValue时，则返回其第一次出现的位置，没有找到则返回-1。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fuzzyQuery</span> (<span class="params">list, keyWord</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> res = [];</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; list.length; i++) &#123;</span><br><span class="line">        <span class="keyword">if</span> (list[i].indexOf(keyWord) &gt;= <span class="number">0</span>) &#123;</span><br><span class="line">            res.push(list[i]);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> res;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="split方法"><a href="#split方法" class="headerlink" title="split方法"></a>split方法</h3><p>stringObject.split(separator)。该方法通过在separator指定的边界处将字符串stringObject分割成子串并返回子串数组。返回的数组中的字串不包括separator自身。如果stringObject中不存在separator，将返回一个只包含stringObject的数组。故可以根据返回数组的长度来判断是否存在子字符串separator</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fuzzyQuery</span>(<span class="params">list, keyWord</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> res = [];</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; list.length; i++) &#123;</span><br><span class="line">        <span class="keyword">if</span> (list[i].split(keyWord).length &gt; <span class="number">1</span>) &#123;</span><br><span class="line">            res.push(list[i]);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> res;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="match方法"><a href="#match方法" class="headerlink" title="match方法"></a>match方法</h3><p>该方法在字符串内检索指定的值，或找到一个或多个正则表达式的匹配；如果没有找到任何匹配的文本，将返回null。否则，将返回一个数组。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fuzzyQuery</span>(<span class="params">list, keyWord</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> res = [];</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; list.length; i++) &#123;</span><br><span class="line">        <span class="keyword">if</span> (list[i].match(keyWord) != <span class="literal">null</span>) &#123;</span><br><span class="line">            res.push(list[i]);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> res;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="test方法"><a href="#test方法" class="headerlink" title="test方法"></a>test方法</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fuzzyQuery</span>(<span class="params">list, keyWord</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> reg = <span class="keyword">new</span> <span class="built_in">RegExp</span>(keyWord);</span><br><span class="line">    <span class="keyword">let</span> res = [];</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; list.length; i++) &#123;</span><br><span class="line">        <span class="keyword">if</span> (reg.test(list[i])) &#123;</span><br><span class="line">            res.push(list[i]);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> res;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="搜索框模糊查询实现"><a href="#搜索框模糊查询实现" class="headerlink" title="搜索框模糊查询实现"></a>搜索框模糊查询实现</h2><h3 id="简单html实现"><a href="#简单html实现" class="headerlink" title="简单html实现"></a>简单html实现</h3><p>主要关注html实现，就不用上述定义的函数了，而是用更简单的方式。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"Content-Type"</span> <span class="attr">content</span>=<span class="string">"text/html; charset=utf-8"</span>/&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span></span><br><span class="line"><span class="actionscript">onload = <span class="function"><span class="keyword">function</span> <span class="params">()</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">    <span class="comment">//onload事件，页面在加载完成时马上执行的一组代码</span></span></span><br><span class="line"><span class="actionscript">    <span class="function"><span class="keyword">function</span> <span class="title">handle</span><span class="params">()</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">        <span class="keyword">var</span> keyWords = &#123; </span></span><br><span class="line"><span class="actionscript">            <span class="string">"a"</span>: [<span class="string">"abada"</span>, <span class="string">"asdkasdfda"</span>, <span class="string">"askfdlf"</span>],</span></span><br><span class="line"><span class="actionscript">            <span class="string">"b"</span>: [<span class="string">"bfsdifdpa"</span>, <span class="string">"杨振宇"</span>, <span class="string">"杨过"</span>],</span></span><br><span class="line"><span class="actionscript">            <span class="string">"c"</span>: [<span class="string">"cdfdfgd"</span>, <span class="string">"cgfhjf"</span>, <span class="string">"cuyjk"</span>],</span></span><br><span class="line"><span class="actionscript">            <span class="string">"d"</span>:[<span class="string">"dfdgd"</span>,<span class="string">"dyjhfh"</span>,<span class="string">"dhyjgh"</span>]</span></span><br><span class="line">        &#125;;</span><br><span class="line"><span class="actionscript">        <span class="keyword">if</span> (keyWords[<span class="keyword">this</span>.value]) &#123;</span></span><br><span class="line"><span class="actionscript">            <span class="comment">//判断body中是否有这个层,如果有就删掉了</span></span></span><br><span class="line"><span class="javascript">            <span class="keyword">if</span> (<span class="built_in">document</span>.getElementById(<span class="string">'dv'</span>)) &#123;</span></span><br><span class="line"><span class="javascript">                <span class="built_in">document</span>.body.removeChild(<span class="built_in">document</span>.getElementById(<span class="string">'dv'</span>));</span></span><br><span class="line">            &#125;</span><br><span class="line"><span class="actionscript">            <span class="comment">//开始创建层</span></span></span><br><span class="line"><span class="javascript">            <span class="keyword">var</span> dvObj = <span class="built_in">document</span>.createElement(<span class="string">'div'</span>);</span></span><br><span class="line"><span class="actionscript">            dvObj.id = <span class="string">'dv'</span>;</span></span><br><span class="line"><span class="actionscript">            dvObj.style.width = <span class="string">'300px'</span>;</span></span><br><span class="line"><span class="actionscript">            <span class="comment">//dvObj.style.height = '200px'; //将来可以不要</span></span></span><br><span class="line"><span class="actionscript">            dvObj.style.border = <span class="string">'1px solid red'</span>;</span></span><br><span class="line"><span class="javascript">            <span class="built_in">document</span>.body.appendChild(dvObj);</span></span><br><span class="line"><span class="actionscript">            <span class="comment">//脱离文档流</span></span></span><br><span class="line"><span class="actionscript">            dvObj.style.position = <span class="string">'absolute'</span>;</span></span><br><span class="line"><span class="actionscript">            dvObj.style.left = <span class="keyword">this</span>.offsetLeft + <span class="string">'px'</span>;</span></span><br><span class="line"><span class="actionscript">            dvObj.style.top = <span class="keyword">this</span>.offsetHeight + <span class="keyword">this</span>.offsetTop + <span class="string">'px'</span>;</span></span><br><span class="line"><span class="actionscript">            <span class="comment">//循环创建</span></span></span><br><span class="line"><span class="actionscript">            <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; keyWords[<span class="keyword">this</span>.value].length; i++) &#123;</span></span><br><span class="line"><span class="actionscript">                <span class="comment">//创建一个可以存文本的标签</span></span></span><br><span class="line"><span class="javascript">                <span class="keyword">var</span> pObj = <span class="built_in">document</span>.createElement(<span class="string">'p'</span>);</span></span><br><span class="line"><span class="actionscript">                pObj.innerText = keyWords[<span class="keyword">this</span>.value][i];</span></span><br><span class="line"><span class="actionscript">                <span class="comment">//p标签要有小手，还有高亮显示</span></span></span><br><span class="line"><span class="actionscript">                pObj.style.cursor = <span class="string">'pointer'</span>;</span></span><br><span class="line"><span class="actionscript">                pObj.style.margin = <span class="string">'5px'</span>;</span></span><br><span class="line"><span class="actionscript">                pObj.onmouseover = <span class="function"><span class="keyword">function</span> <span class="params">()</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">                    <span class="keyword">this</span>.style.backgroundColor = <span class="string">'red'</span>;</span></span><br><span class="line">                &#125;;</span><br><span class="line"><span class="actionscript">                pObj.onmouseout = <span class="function"><span class="keyword">function</span> <span class="params">()</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">                    <span class="keyword">this</span>.style.backgroundColor = <span class="string">''</span>;</span></span><br><span class="line">                &#125;</span><br><span class="line"><span class="actionscript">                dvObj.appendChild(pObj); <span class="comment">//操作节点，把p标签加到层中</span></span></span><br><span class="line"><span class="actionscript">                <span class="comment">//同样可以用insertBefore()来添加</span></span></span><br><span class="line">            &#125;</span><br><span class="line"><span class="actionscript">            <span class="comment">//创建可以显示文件的标签</span></span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"><span class="actionscript">    <span class="comment">//firefox下检测状态改变只能用oninput,且需要用addEventListener来注册事件。 </span></span></span><br><span class="line"><span class="javascript">    <span class="keyword">if</span> (<span class="regexp">/msie/i</span>.test(navigator.userAgent)) <span class="comment">//ie浏览器 </span></span></span><br><span class="line">    &#123;</span><br><span class="line"><span class="javascript">        <span class="built_in">document</span>.getElementById(<span class="string">'txt'</span>).onpropertychange = handle</span></span><br><span class="line">    &#125;</span><br><span class="line"><span class="actionscript">    <span class="keyword">else</span> &#123;<span class="comment">//非ie浏览器，比如Firefox </span></span></span><br><span class="line"><span class="javascript">        <span class="built_in">document</span>.getElementById(<span class="string">'txt'</span>).addEventListener(<span class="string">"input"</span>, handle, <span class="literal">false</span>);</span></span><br><span class="line"><span class="actionscript">        <span class="comment">//绑定事件对象.addEventListener(事件类型，回调函数，bool值)</span></span></span><br><span class="line"><span class="actionscript">        <span class="comment">//如果不传入bool值，或者为false；事件就会走冒泡阶段；反之，事件会走捕获阶段。</span></span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">"msg"</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">请输入搜索关键字</span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">name</span>=<span class="string">"name"</span> <span class="attr">value</span>=<span class="string">""</span> <span class="attr">style</span>=<span class="string">"width:300px;height:30px;font-size:25px; border:1px solid green"</span> <span class="attr">id</span>=<span class="string">"txt"</span>/&gt;</span>百度一下</span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="利用JSONP调用百度接口"><a href="#利用JSONP调用百度接口" class="headerlink" title="利用JSONP调用百度接口"></a>利用JSONP调用百度接口</h3><p>JSONP(JSONwith Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。 该代码实现搬运自<a href="https://blog.csdn.net/zfz5720/article/details/78044439" target="_blank" rel="noopener">CSDN</a></p>
<p>实现原理：向输入框动态输入时关键词，将当前关键词作为问号参数后面的值，因为要跨域使用百度的接口，所以通过 JSONP 跨域创建 Ajax 请求。回调函数处理返回值。</p>
<p>1.使用 flex 布局实现搜索框的水平垂直居中。</p>
<p>2.先获取常用的 DOM 节点，避免后续频繁查询操作 DOM。</p>
<p>3.为了避免在输入过程中频繁发送请求(如果打字速度快),对请求函数做了函数节流，调了一下间隔 130ms 差不多正好，时间再长就会有卡顿的感觉。使用了 ES6 中的箭头函数避免了setTimeout 中 this 指向的问题。</p>
<p>4.在回调函数中：</p>
<ul>
<li>每一次执行时首先要清除建议框里的内容，不然上一次的结果还会存在建议框里！截取了结果中的前五个(如果把所有结果都展示出来感觉有点丑…百度官方是展示前四个搜索建议)</li>
<li>结果处理完毕后，执行自执行匿名函数，删除创建的 script 标签;</li>
</ul>
<p>5.由于 li 是动态创建的，点击 li 标签或者点击”搜索一下”跳转百度进行搜索时，利用事件冒泡原理，进行事件委托。这里没有考虑兼容性问题：</p>
<p>6.除了点击事件，键盘事件–回车键以及上下键都是进行事件委托进行注册的。最终能够实现键盘上下键鼠标选择，点击“搜索一下”或回车键实现跳转搜索。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 兼容性视图 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">content</span>=<span class="string">"更方便快捷搜索，从而达到事半功倍的效果"</span> <span class="attr">name</span>=<span class="string">"description"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>search you want<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line">    html &#123;</span><br><span class="line">      height: 100%;</span><br><span class="line">    &#125;</span><br><span class="line">    body &#123;</span><br><span class="line"><span class="css">      <span class="selector-tag">background</span>: <span class="selector-id">#f0f3ef</span>;</span></span><br><span class="line">      height: 100%;</span><br><span class="line">    &#125;</span><br><span class="line"><span class="css">    <span class="selector-class">.container</span> &#123;</span></span><br><span class="line">      height: 100%;</span><br><span class="line">      display: flex;</span><br><span class="line">      justify-content: center;</span><br><span class="line">      align-items: center;</span><br><span class="line">      flex-direction: column;</span><br><span class="line">    &#125;</span><br><span class="line"><span class="css">    <span class="selector-class">.bgDiv</span> &#123;</span></span><br><span class="line">      box-sizing: border-box;</span><br><span class="line">      width: 595px;</span><br><span class="line">      height: 55px;</span><br><span class="line">      position: relative;</span><br><span class="line">    /* position: absolute;</span><br><span class="line">    left: 50%;</span><br><span class="line">    top: 50%;</span><br><span class="line">    transform: translate(-50%, -50%); */</span><br><span class="line">    &#125;</span><br><span class="line"><span class="css">    <span class="selector-class">.search-input-text</span> &#123;</span></span><br><span class="line"><span class="css">      <span class="selector-tag">border</span>: 1<span class="selector-tag">px</span> <span class="selector-tag">solid</span> <span class="selector-id">#b6b6b6</span>;</span></span><br><span class="line">      width: 495px;</span><br><span class="line"><span class="css">      <span class="selector-tag">background</span>: <span class="selector-id">#fff</span>;</span></span><br><span class="line">      height: 33px;</span><br><span class="line">      line-height: 33px;</span><br><span class="line">      font-size: 18px;</span><br><span class="line">      padding: 3px 0 0 7px;</span><br><span class="line">    &#125;</span><br><span class="line"><span class="css">    <span class="selector-class">.search-input-button</span> &#123;</span></span><br><span class="line">      width: 90px;</span><br><span class="line">      height: 38px;</span><br><span class="line"><span class="css">      <span class="selector-tag">color</span>: <span class="selector-id">#fff</span>;</span></span><br><span class="line">      font-size: 16px;</span><br><span class="line">      letter-spacing: 3px;</span><br><span class="line"><span class="css">      <span class="selector-tag">background</span>: <span class="selector-id">#3385ff</span>;</span></span><br><span class="line"><span class="css">      <span class="selector-tag">border</span>: <span class="selector-class">.5px</span> <span class="selector-tag">solid</span> <span class="selector-id">#2d78f4</span>;</span></span><br><span class="line">      margin-left: -5px;</span><br><span class="line">      vertical-align: top;</span><br><span class="line"><span class="css">      <span class="selector-tag">opacity</span>: <span class="selector-class">.9</span>;</span></span><br><span class="line">    &#125;</span><br><span class="line"><span class="css">    <span class="selector-class">.search-input-button</span><span class="selector-pseudo">:hover</span> &#123;</span></span><br><span class="line">      opacity: 1;</span><br><span class="line"><span class="css">      <span class="selector-tag">box-shadow</span>: 0 1<span class="selector-tag">px</span> 1<span class="selector-tag">px</span> <span class="selector-id">#333</span>;</span></span><br><span class="line">      cursor: pointer;</span><br><span class="line">    &#125;</span><br><span class="line"><span class="css">    <span class="selector-class">.suggest</span> &#123;</span></span><br><span class="line">      width: 502px;</span><br><span class="line">      position: absolute;</span><br><span class="line">      top: 38px;</span><br><span class="line"><span class="css">      <span class="selector-tag">border</span>: 1<span class="selector-tag">px</span> <span class="selector-tag">solid</span> <span class="selector-id">#999</span>;</span></span><br><span class="line"><span class="css">      <span class="selector-tag">background</span>: <span class="selector-id">#fff</span>;</span></span><br><span class="line">      display: none;</span><br><span class="line">    &#125;</span><br><span class="line"><span class="css">    <span class="selector-class">.suggest</span> <span class="selector-tag">ul</span> &#123;</span></span><br><span class="line">      list-style: none;</span><br><span class="line">      margin: 0;</span><br><span class="line">      padding: 0;</span><br><span class="line">    &#125;</span><br><span class="line"><span class="css">    <span class="selector-class">.suggest</span> <span class="selector-tag">ul</span> <span class="selector-tag">li</span> &#123;</span></span><br><span class="line">      padding: 3px;</span><br><span class="line">      font-size: 17px;</span><br><span class="line">      line-height: 25px;</span><br><span class="line">      cursor: pointer;</span><br><span class="line">    &#125;</span><br><span class="line"><span class="css">    <span class="selector-class">.suggest</span> <span class="selector-tag">ul</span> <span class="selector-tag">li</span><span class="selector-pseudo">:hover</span> &#123;</span></span><br><span class="line"><span class="css">      <span class="selector-tag">background-color</span>: <span class="selector-id">#e5e5e5</span></span></span><br><span class="line">    &#125;</span><br><span class="line">  <span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"container"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"bgDiv"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">class</span>=<span class="string">"search-input-text"</span> <span class="attr">value</span>=<span class="string">""</span> <span class="attr">autofocus</span> <span class="attr">placeholder</span>=<span class="string">"关键词"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"搜索一下"</span> <span class="attr">class</span>=<span class="string">"search-input-button"</span> <span class="attr">id</span>=<span class="string">"btn"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"suggest"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">ul</span> <span class="attr">id</span>=<span class="string">"search-result"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> suggestContainer = <span class="built_in">document</span>.getElementsByClassName(<span class="string">"suggest"</span>)[<span class="number">0</span>];</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> searchInput = <span class="built_in">document</span>.getElementsByClassName(<span class="string">"search-input-text"</span>)[<span class="number">0</span>];</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> bgDiv = <span class="built_in">document</span>.getElementsByClassName(<span class="string">"bgDiv"</span>)[<span class="number">0</span>];</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> searchResult = <span class="built_in">document</span>.getElementById(<span class="string">"search-result"</span>);</span></span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="comment">// 清除建议框内容</span></span></span><br><span class="line"><span class="actionscript">    <span class="function"><span class="keyword">function</span> <span class="title">clearContent</span><span class="params">()</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">      <span class="keyword">var</span> size = searchResult.childNodes.length;</span></span><br><span class="line"><span class="actionscript">        <span class="comment">//childNodes方法返回数组，根据数组长度判断建议框的长度</span></span></span><br><span class="line"><span class="actionscript">      <span class="keyword">for</span> (<span class="keyword">var</span> i = size - <span class="number">1</span>; i &gt;= <span class="number">0</span>; i--) &#123;</span></span><br><span class="line">        searchResult.removeChild(searchResult.childNodes[i]);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;;</span><br><span class="line"><span class="actionscript">	<span class="comment">// 回调函数处理返回值</span></span></span><br><span class="line"><span class="actionscript">    <span class="function"><span class="keyword">function</span> <span class="title">handleSuggestion</span><span class="params">(res)</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">      <span class="comment">// 清空之前的数据！！</span></span></span><br><span class="line">      clearContent();</span><br><span class="line"><span class="actionscript">      <span class="keyword">var</span> result = res.s;</span></span><br><span class="line"><span class="actionscript">      <span class="comment">// 截取前五个搜索建议项</span></span></span><br><span class="line">      if (result.length &gt; 4) &#123;</span><br><span class="line">        result = result.slice(0, 5)</span><br><span class="line">      &#125;</span><br><span class="line"><span class="javascript">      <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; result.length; i++) &#123;</span></span><br><span class="line"><span class="actionscript">        <span class="comment">// 动态创建li标签</span></span></span><br><span class="line"><span class="javascript">        <span class="keyword">var</span> liObj = <span class="built_in">document</span>.createElement(<span class="string">"li"</span>);</span></span><br><span class="line">        liObj.innerHTML = result[i];</span><br><span class="line">        searchResult.appendChild(liObj);</span><br><span class="line">      &#125;</span><br><span class="line"><span class="actionscript">      <span class="comment">// 自执行匿名函数--删除用于跨域的script标签</span></span></span><br><span class="line"><span class="actionscript">      (<span class="function"><span class="keyword">function</span> <span class="params">()</span> </span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">var</span> s = <span class="built_in">document</span>.querySelectorAll(<span class="string">'script'</span>);</span></span><br><span class="line"><span class="actionscript">        <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">1</span>, len = s.length; i &lt; len; i++) &#123;</span></span><br><span class="line"><span class="javascript">          <span class="built_in">document</span>.body.removeChild(s[i]);</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;)()</span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="function"><span class="keyword">function</span> <span class="title">jumpPage</span><span class="params">()</span> </span>&#123;</span></span><br><span class="line"><span class="javascript">      <span class="built_in">window</span>.open(<span class="string">`https://www.baidu.com/s?word=<span class="subst">$&#123;<span class="built_in">encodeURI</span>(searchInput.value)&#125;</span>`</span>);</span></span><br><span class="line">    &#125;  </span><br><span class="line">     </span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> timer = <span class="literal">null</span>;</span></span><br><span class="line"><span class="actionscript">    <span class="comment">// 注册输入框键盘抬起事件</span></span></span><br><span class="line"><span class="actionscript">    searchInput.onkeyup = <span class="function"><span class="keyword">function</span> <span class="params">(e)</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">      suggestContainer.style.display = <span class="string">"block"</span>;</span></span><br><span class="line"><span class="actionscript">      <span class="comment">// 如果输入框内容为空 清除内容且无需跨域请求</span></span></span><br><span class="line"><span class="actionscript">      <span class="keyword">if</span> (<span class="keyword">this</span>.value.length === <span class="number">0</span>) &#123;</span></span><br><span class="line">        clearContent();</span><br><span class="line"><span class="actionscript">        <span class="keyword">return</span>;</span></span><br><span class="line">      &#125;</span><br><span class="line"><span class="actionscript">      <span class="keyword">if</span> (<span class="keyword">this</span>.timer) &#123;</span></span><br><span class="line"><span class="actionscript">        clearTimeout(<span class="keyword">this</span>.timer);</span></span><br><span class="line">      &#125;</span><br><span class="line">      if (e.keyCode !== 40 &amp;&amp; e.keyCode !== 38) &#123;</span><br><span class="line"><span class="actionscript">        <span class="comment">// 函数节流优化</span></span></span><br><span class="line"><span class="javascript">        <span class="keyword">this</span>.timer = setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="actionscript">          <span class="comment">// 创建script标签JSONP跨域</span></span></span><br><span class="line"><span class="javascript">          <span class="keyword">var</span> script = <span class="built_in">document</span>.createElement(<span class="string">"script"</span>);</span></span><br><span class="line"><span class="javascript">          script.src = <span class="string">"https://www.baidu.com/su?&amp;wd="</span> + <span class="built_in">encodeURI</span>(<span class="keyword">this</span>.value.trim()) +</span></span><br><span class="line"><span class="actionscript">            <span class="string">"&amp;p=3&amp;cb=handleSuggestion"</span>;</span></span><br><span class="line"><span class="javascript">          <span class="built_in">document</span>.body.appendChild(script);</span></span><br><span class="line">        &#125;, 130)</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;;</span><br><span class="line"><span class="actionscript">    <span class="comment">// 事件委托 点击li标签或者点击搜索按钮跳转到百度搜索页面</span></span></span><br><span class="line"><span class="actionscript">    bgDiv.addEventListener(<span class="string">"click"</span>, <span class="function"><span class="keyword">function</span> <span class="params">(e)</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">      <span class="keyword">if</span> (e.target.nodeName.toLowerCase() === <span class="string">'li'</span>) &#123;</span></span><br><span class="line"><span class="actionscript">        <span class="keyword">var</span> keywords = e.target.innerText;</span></span><br><span class="line">        searchInput.value = keywords;</span><br><span class="line">        jumpPage();</span><br><span class="line"><span class="actionscript">      &#125; <span class="keyword">else</span> <span class="keyword">if</span> (e.target.id === <span class="string">'btn'</span>) &#123;</span></span><br><span class="line">        jumpPage();</span><br><span class="line">      &#125;</span><br><span class="line"><span class="actionscript">    &#125;, <span class="literal">false</span>);</span></span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> i = <span class="number">0</span>;</span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> flag = <span class="number">1</span>;</span></span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="comment">// 事件委托 监听键盘事件</span></span></span><br><span class="line"><span class="actionscript">    bgDiv.addEventListener(<span class="string">"keydown"</span>, <span class="function"><span class="keyword">function</span> <span class="params">(e)</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">      <span class="keyword">var</span> size = searchResult.childNodes.length;</span></span><br><span class="line">      if (e.keyCode === 13) &#123;</span><br><span class="line">        jumpPage();</span><br><span class="line">      &#125;;</span><br><span class="line"><span class="actionscript">      <span class="comment">// 键盘向下事件</span></span></span><br><span class="line">      if (e.keyCode === 40) &#123;</span><br><span class="line">        if (flag === 0) &#123;</span><br><span class="line">          i = i + 2;</span><br><span class="line">        &#125;</span><br><span class="line">        flag = 1;</span><br><span class="line">        e.preventDefault();</span><br><span class="line">        if (i &gt;= size) &#123;</span><br><span class="line">          i = 0;</span><br><span class="line">        &#125;</span><br><span class="line">        if (i &lt; size) &#123;</span><br><span class="line">          searchInput.value = searchResult.childNodes[i++].innerText;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;;</span><br><span class="line"><span class="actionscript">      <span class="comment">// 键盘向上事件</span></span></span><br><span class="line">      if (e.keyCode === 38) &#123;</span><br><span class="line">        if (flag === 1) &#123;</span><br><span class="line">          i = i - 2;</span><br><span class="line">        &#125;</span><br><span class="line">        flag = 0;</span><br><span class="line">        e.preventDefault();</span><br><span class="line">        if (i &lt; 0) &#123;</span><br><span class="line">          i = size - 1;</span><br><span class="line">        &#125;</span><br><span class="line">        if (i &gt; -1) &#123;</span><br><span class="line">          searchInput.value = searchResult.childNodes[i--].innerText;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;;</span><br><span class="line"><span class="actionscript">    &#125;, <span class="literal">false</span>);</span></span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="comment">// 点击页面任何其他地方 搜索结果框消失</span></span></span><br><span class="line"><span class="javascript">    <span class="built_in">document</span>.onclick = <span class="function"><span class="params">()</span> =&gt;</span> clearContent()</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>


    </div>
    
    
    
    
    <div>
      
        <div>
    
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
    
</div>

      
    </div>
        <div class="reward-container">
  <div>坚持原创技术分享，您的支持将鼓励我继续创作！</div>
  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
    打赏
  </button>
  <div id="qr" style="display: none;">
      
      <div style="display: inline-block;">
        <img src="/images/alipay.png" alt="Li Yudong 支付宝">
        <p>支付宝</p>
      </div>

  </div>
</div>

        

<div>
<ul class="post-copyright">
  <li class="post-copyright-author">
    <strong>本文作者： </strong>Li Yudong
  </li>
  <li class="post-copyright-link">
    <strong>本文链接：</strong>
    <a href="http://example.com/2021/02/06/%E9%9D%A2%E8%AF%95%E6%80%BB%E7%BB%93/%E6%AD%A3%E5%88%99%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB/" title="正则面试题汇总">http://example.com/2021/02/06/面试总结/正则面试题汇总/</a>
  </li>
  <li class="post-copyright-license">
    <strong>版权声明： </strong>本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="noopener" target="_blank"><i class="fab fa-fw fa-creative-commons"></i>BY-NC-SA</a> 许可协议。转载请注明出处！
  </li>
</ul>
</div>

    
      <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/%E6%AD%A3%E5%88%99/" rel="tag"># 正则</a>
          </div>
    
        

    
        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2021/01/09/%E5%89%8D%E7%AB%AF/DOM%E9%97%AE%E9%A2%98%E6%B1%87%E6%80%BB/" rel="prev" title="DOM问题汇总">
      <i class="fa fa-chevron-left"></i> DOM问题汇总
    </a></div>
      <div class="post-nav-item">
    <a href="/2021/03/06/%E5%AD%A6%E6%A0%A1%E9%A1%B9%E7%9B%AE%E5%BA%94%E7%94%A8/%E5%B1%8F%E5%B9%95%E9%80%82%E9%85%8D%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/" rel="next" title="屏幕适配解决方案">
      屏幕适配解决方案 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#前言"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#基本符号"><span class="nav-number">2.</span> <span class="nav-text">基本符号</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#简单正则匹配"><span class="nav-number">3.</span> <span class="nav-text">简单正则匹配</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#字符匹配"><span class="nav-number">3.1.</span> <span class="nav-text">字符匹配</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#16进制颜色值"><span class="nav-number">3.1.1.</span> <span class="nav-text">16进制颜色值</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#24小时时间"><span class="nav-number">3.1.2.</span> <span class="nav-text">24小时时间</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#IP地址"><span class="nav-number">3.1.3.</span> <span class="nav-text">IP地址</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#带格式日期"><span class="nav-number">3.1.4.</span> <span class="nav-text">带格式日期</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#字符串去重"><span class="nav-number">3.1.5.</span> <span class="nav-text">字符串去重</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#HTML标签"><span class="nav-number">3.1.6.</span> <span class="nav-text">HTML标签</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#驼峰字符串"><span class="nav-number">3.1.7.</span> <span class="nav-text">驼峰字符串</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#邮箱格式"><span class="nav-number">3.1.8.</span> <span class="nav-text">邮箱格式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#识别十进制整数"><span class="nav-number">3.1.9.</span> <span class="nav-text">识别十进制整数</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#颜色字符串转换"><span class="nav-number">3.1.10.</span> <span class="nav-text">颜色字符串转换</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#变为驼峰"><span class="nav-number">3.1.11.</span> <span class="nav-text">变为驼峰</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#获取url中参数"><span class="nav-number">3.1.12.</span> <span class="nav-text">获取url中参数</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#域名解析"><span class="nav-number">3.1.13.</span> <span class="nav-text">域名解析</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#位置匹配"><span class="nav-number">3.2.</span> <span class="nav-text">位置匹配</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#千位分隔符"><span class="nav-number">3.2.1.</span> <span class="nav-text">千位分隔符</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#密码判断"><span class="nav-number">3.2.2.</span> <span class="nav-text">密码判断</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#替代正则"><span class="nav-number">4.</span> <span class="nav-text">替代正则</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#提取年月日"><span class="nav-number">4.1.</span> <span class="nav-text">提取年月日</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#模糊查询"><span class="nav-number">4.2.</span> <span class="nav-text">模糊查询</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#indexOf方法"><span class="nav-number">4.2.1.</span> <span class="nav-text">indexOf方法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#split方法"><span class="nav-number">4.2.2.</span> <span class="nav-text">split方法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#match方法"><span class="nav-number">4.2.3.</span> <span class="nav-text">match方法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#test方法"><span class="nav-number">4.2.4.</span> <span class="nav-text">test方法</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#搜索框模糊查询实现"><span class="nav-number">4.3.</span> <span class="nav-text">搜索框模糊查询实现</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#简单html实现"><span class="nav-number">4.3.1.</span> <span class="nav-text">简单html实现</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#利用JSONP调用百度接口"><span class="nav-number">4.3.2.</span> <span class="nav-text">利用JSONP调用百度接口</span></a></li></ol></li></ol></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="Li Yudong"
      src="/images/author.jpg">
  <p class="site-author-name" itemprop="name">Li Yudong</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">95</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
          
        <span class="site-state-item-count">14</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
          
        <span class="site-state-item-count">18</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <a href="https://github.com/tiarmor1" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;tiarmor1" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
      <span class="links-of-author-item">
        <a href="mailto:1157019137@qq.com" title="E-Mail → mailto:1157019137@qq.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
      </span>
  </div>
  <div class="cc-license motion-element" itemprop="license">
    <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" class="cc-opacity" rel="noopener" target="_blank"><img src="/images/cc-by-nc-sa.svg" alt="Creative Commons"></a>
  </div>



      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 2020 – 
  <span itemprop="copyrightYear">2022</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Li Yudong</span>
</div>

        








      </div>
    </footer>
  </div>

  
  
  <script color='0,0,0' opacity='0.5' zIndex='-1' count='150' src="/lib1/canvas-nest/canvas-nest.min.js"></script>
  <script src="/lib1/anime.min.js"></script>
  <script src="/lib1/velocity/velocity.min.js"></script>
  <script src="/lib1/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/pisces.js"></script>


<script src="/js/next-boot.js"></script>




  




  
<script src="/js/local-search.js"></script>













  

  

  
   <canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> 
   <script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script> 
   <script type="text/javascript" src="/js/fireworks.js"></script>
  
</body>
</html>

